import { StyleSheet } from 'react-native';
import { getScreenInfo, ScreenOrientation } from '../../../../util/screen';
import { phonePx } from '../../../../util/adapt';
import { APP_BLUE } from '../../../../constant/color';
import { CARD_HEIGHT } from '../../constant';

const { width } = getScreenInfo({
  screenOrientation: ScreenOrientation.Landscape
});

export default StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center'
  },
  content: {
    position: 'absolute',
    left: 0,
    top: CARD_HEIGHT / 4,
    right: 0,
    bottom: 0,
    backgroundColor: 'transparent'
  },
  background: {
    backgroundColor: 'rgba(0, 0, 0, .3)'
  },
  brightness: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    width: width / 4,
    backgroundColor: 'transparent'
  },
  volume: {
    position: 'absolute',
    right: 0,
    top: 0,
    bottom: 0,
    width: width / 4,
    backgroundColor: 'transparent'
  },
  progressContent: {
    width: phonePx(180),
    height: phonePx(22),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0)'
  },
  brightnessIcon: {
    width: phonePx(22),
    height: phonePx(17)
  },
  volumeIcon: {
    width: phonePx(20),
    height: phonePx(20)
  },
  lineContent: {
    width: phonePx(156),
    height: phonePx(4),
    backgroundColor: '#8F95A2',
    borderRadius: phonePx(2),
    marginLeft: phonePx(8)
  },
  progress: {
    position: 'absolute',
    left: 0,
    top: 0,
    bottom: 0,
    borderRadius: phonePx(2),
    backgroundColor: APP_BLUE
  },
  playProgressDesc: {
    fontSize: phonePx(14),
    lineHeight: phonePx(22),
    color: '#ffffff'
  },
  descContent: {
    justifyContent: 'center',
    width: phonePx(70),
    alignItems: 'flex-end'
  },
  rightDescContent: {
    justifyContent: 'center',
    width: phonePx(70),
    alignItems: 'flex-start'
  },
  line: {
    fontSize: phonePx(14),
    lineHeight: phonePx(22),
    color: '#ffffff'
  },
  totalTime: {
    fontSize: phonePx(14),
    lineHeight: phonePx(22),
    color: '#C4C4C4'
  },
  model: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    width: phonePx(10),
    backgroundColor: 'transparent'
  },
  next: {
    position: 'absolute',
    left: 0,
    bottom: 0,
    width: phonePx(100),
    height: phonePx(50),
    borderRadius: phonePx(25),
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red'
  },
  desc: {
    fontSize: phonePx(20),
    fontWeight: '500',
    color: '#ffffff'
  }
});
